import React, { Component } from "react";
import { connect } from "react-redux";
import "./index.scss";
import { getMoreList } from "../store/actions";
import { Link } from "react-router-dom";
class List extends Component {
  render() {
    return (
      <div className="Listwrapper ">
        {this.props.articlelist.map((item, index) => (
          
       <Link key={index} to={'/detail/' + item.get("id")}>
            <div className="listItem clearfix" key={item.get("id")}>
              <img src={item.get("imgUrl")} alt="" className="pic" />
              <div className="ListInfo">
                <h3 className="title">{item.get("title")}</h3>
                <p className="desc">{item.get("desc")}</p>
              </div>
            </div>
          </Link>
        ))}
        <div
          className="loadMore"
          onClick={() => {
            this.props.handleChange(this.props.page);
          }}
        >
          加载更多
        </div>
      </div>
    );
  }
}

const mapState = (state) => ({
  articlelist: state.getIn(["home", "articleList"]),
  page: state.getIn(["home", "page"]),
});
const mapDispatchtoProps = (dispatch) => {
  return {
    handleChange(page) {
      dispatch(getMoreList(page));
    },
  };
};

export default connect(mapState, mapDispatchtoProps)(List);
